<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-15 19:04:54
 * @LastEditTime: 2020-05-15 12:53:29
 * @FilePath: \client\src\views\Archives.vue
 * @Description: 博客归档页面
 -->

<template>
  <div class="comm-con">
    <nav-bar></nav-bar>
    <b-container class="main bg-img">
      <b-row>
        <b-col cols="3" sm="3" md="3" lg="3" xl="3">
          <b-list-group>
            <b-list-group-item
              :active="activeIndex == index ? true : false"
              :id="'month-'+index"
              @click="updateMonth(m,index)"
              v-for="(m,index) in months"
              :key="index"
            >{{m}}</b-list-group-item>
          </b-list-group>
        </b-col>
        <b-col cols="9" sm="9" md="9" lg="9" xl="9">
          <b-card class="card" v-for="article in articles" :key="article.id">
            <b-card-text>
              <b-badge variant="info">{{article.type==1 ? '原创' : '转载'}}</b-badge>&nbsp;&nbsp;
              <b-link :to="'/post/'+article.id">{{article.title}}</b-link>
            </b-card-text>
            <b-card-sub-title>
              {{article.gmtUpdate}}&nbsp;
              <i class="icon iconfont icon-yuedu"></i>
              {{article.views}}&nbsp;
              <i class="icon iconfont icon-iconfontpinglun"></i>
              {{article.comments}}
            </b-card-sub-title>
          </b-card>
          <!-- 分页 -->
          <div class="overflow-auto pagination" v-if="totalPages>1">
            <b-pagination-nav
              :link-gen="linkGen"
              :number-of-pages="totalPages"
              use-router
              :value="currentPage"
            ></b-pagination-nav>
          </div>
        </b-col>
      </b-row>
    </b-container>
    <Footer></Footer>
  </div>
</template>

<script>
import url from "@/request/url";
export default {
  name: "Archives",
  data() {
    return {
      activeIndex: 0,
      month: "",
      months: [],
      articles: [],
      currentPage: 1,
      totalPages: 0
    };
  },
  components: {
    Footer: () => import("@/components/Footer"),
    NavBar: () => import("@/components/NavBar")
  },
  methods: {
    linkGen(pageNum) {
      return pageNum === 1 ? "/archives?" : `/archives?page=${pageNum}`;
    },
    updateMonth(month, index) {
      this.activeIndex = index;
      this.month = month;
      this.currentPage = 1;
      this.getArticles();
    },
    getArticles() {
      if (this.months.length == 0) {
        return;
      }
      this.$axios
        .get(url.comm.pageArticles, {
          params: {
            pageNumber: this.currentPage,
            condition: "month",
            data: this.month
          }
        })
        .then(res => {
          let pageInfo = res.data;
          // console.log(res.data);
          this.articles = pageInfo.data;
          this.currentPage = pageInfo.currentPage;
          this.totalPages = pageInfo.totalPages;
        });
    }
  },
  watch: {
    // 监听路由变化,这样设计的原因在于：查看文章之后点击浏览器回退键之后还会返回当前页面
    $route(to) {
      this.currentPage = to.query.page || 1;
      this.getArticles();
    }
  },
  activated() {
    this.currentPage = this.$route.query.page || 1;
    this.$axios.get(url.comm.archives).then(resp => {
      this.months = resp.data;
      if (this.months.length > 0) {
        this.updateMonth(this.months[0], 0);
      }
    });
  }
};
</script>

<style scoped>
.card {
  margin-bottom: 8px;
}
.pagination {
  float: right;
}
</style>